<template>
  <!-- 保洁 -->
  <div class="Cleaner">
    <router-link class="Cleaner-head" tag="div" to="/life">
      <img src="../../../assets/Life/小箭头.png" alt="" />
    </router-link>
    <div class="Cleaner-sale">
      <span class="sale">优惠</span>
      <span class="one">首次充值充100送200</span>
      <img src="../../../assets/Life/小箭头2.png" alt="">
      <span class="at">立即充值</span>
    </div>
    <div class="Cleaner-yiju">
      <img src="../../../assets/Life/1阿姨图.png" alt="" />
      <div class="ziti">
        <p class="yiju">宜居保洁</p>
        <p class="your">您的专享周期保洁</p>
      </div>
      <p class="rise">0元起</p>
    </div>
    <div class="Cleaner-yiju">
      <img src="../../../assets/Life/2女士图.png" alt="" />
      <div class="ziti">
        <p class="yiju">日常保洁</p>
        <p class="your">室内表面清洁，物品归纳整理服务</p>
      </div>
      <p class="rise">50元起</p>
    </div>
    <div class="Cleaner-yiju">
      <img src="../../../assets/Life/除螨图.png" alt="" />
      <div class="ziti">
        <p class="yiju">专业除螨</p>
        <p class="your">对床铺、沙发等家具提供除螨服务</p>
      </div>
      <p class="rise">150元起</p>
    </div>
    <div class="Cleaner-yiju">
      <img src="../../../assets/Life/擦玻璃.png" alt="" />
      <div class="ziti">
        <p class="yiju">擦玻璃</p>
        <p class="your">您的专享周期保洁</p>
      </div>
      <p class="rise">0元起</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "cleaner",
};
</script>

<style>
.Cleaner {
  background-color: #e6e6e6;
  height: 13.8rem;
}
.Cleaner-head {
  width: 100%;
  height: 4rem;
  background: url(../../../assets/Life/banner部分.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.Cleaner-head img {
  width: 0.4rem;
  float: left;
  margin: 0.5rem 0 0 0.2rem;
}
.Cleaner-sale {
  height: 0.8rem;
  width: 100%;
}
.sale {
  width: 0.7rem;
  height: 0.4rem;
  border: 0.5px solid red;
  border-radius: 0.1rem;
  line-height: 0.4rem;
  font-size: 0.2rem;
  color: rgba(255, 0, 0, 0.7);
  float: left;
  margin: 0.2rem 0.1rem 0 0.2rem;
}
.one {
  line-height: 0.8rem;
  font-size: 0.25rem;
  float: left;
  color: rgba(0, 0, 0, 0.6);
}
.at {
  line-height: 0.8rem;
  font-size: 0.25rem;
  float: right;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 0.3rem 0 0;
}
.Cleaner-sale img{
  float: right;
  line-height: 0.8rem;
  height: 0.3rem;
  margin: 0.25rem 0.3rem 0 0;
}
.Cleaner-yiju {
  width: 97%;
  height: 2rem;
  margin: 0.1rem;
  border-radius: 0.2rem;
  background: #fff;
  position: relative;
}
.Cleaner-yiju img {
  float: left;
  width: 35%;
  height: 90%;
  margin: 0.1rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.ziti{
    float: left;
}
.yiju {
  margin: 0.2rem 0 0 0.2rem;
  text-align: left;
  font-size: 0.3rem;
}
.your {
  margin: 0.2rem 0 0 0.2rem;
  font-size: 0.25rem;
  color: rgba(0, 0, 0, 0.6);
}
.rise{
    position: absolute;
    bottom: 0.2rem;
    right: 0.2rem;
    font-size: 0.3rem;
    color: red;
}
</style>